<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收益提现</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" media="all">
    <style>
        .orderList-container {
            padding: 20px;
        }

        td[data-field="imgUrl"] div,
        td[data-field="negativeImgUrl"] div {
            height: 120px;
        }

        .lay-form {
            padding: 20px;
        }

        .orderList-container {
            background-color: #fff;
        }

        .bar {
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
        }

        .searchInput {
            display: flex;
            align-items: flex-end;
        }

        .searchInput label {
            font-size: 12px;
        }

        .searchInput input {
            width: 200px;
        }

        .searchInput .layui-form-label {
            padding: 9px 0;
        }

        .bar .layui-form-label {
            padding: 0;
            padding-bottom: 4px;
            text-align: left;
        }

        .bar .layui-inline {
            margin-right: 20px;
        }

        .layui-table img {
            max-width: 200px;
            object-fit: contain;
        }

        .layui-table-cell {
            height: auto;
        }

        .layer-container {
            padding: 20px;
        }

        .layer-container ul {
            display: flex;
        }

        .layer-container ul li {
            border: 1px solid #efefef;
            flex: 1;
            padding: 30px;
            text-align: center;
        }

        .layer-container ul li p {
            line-height: 30px;
            color: #666;
        }

        .layer-container ul .flag {
            flex: 0 0 300px;
        }
    </style>
</head>

<body>
    <div class="orderList-container">
        <!-- 搜索 -->
        <div class="searchInput">
            <form class="layui-form" action="" lay-filter="resets">
                <div class="layui-inline">
                    <label class="layui-form-label">会员昵称：</label>
                    <input class="layui-input" name="userName" placeholder="请输入会员昵称" autocomplete="off">
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">手机号：</label>
                    <input type="text" class="layui-input" id="test1" name="userPhone" placeholder="请输入手机号"
                        autocomplete="off">
                </div>
                 <!-- 筛选 -->
                <div class="layui-inline" id="status">
                    <label class="layui-form-label"
                        style="padding-left:10px; text-align:center; padding-right:0 ; width: 60px;">提现类型：</label>
                    <div class="layui-input-block" style="margin-left: 80px;">
                        <select name="cashOutType">
                            <option value="">全部</option>
                            <option value="0">银行卡</option>
                            <option value="1">零钱</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">开始时间：</label>
                    <input class="layui-input" name="cashOutTimeStart" id="test5" placeholder="请输入开始时间" autocomplete="off">
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">结束时间：</label>
                    <input class="layui-input" name="cashOutTimeEnd"  id="test2" placeholder="请输入结束时间" autocomplete="off">
                </div>

                <button class="layui-btn" data-type="reload" lay-submit="" lay-filter="searchForm">搜索</button>
                <button class="layui-btn layui-btn-primary" data-type="reload" lay-submit=""
                    lay-filter="reset">重置</button>
            </form>
        </div>

        <!-- <form class="layui-form">
           

            <div class="layui-inline" id="status" style="margin-top: 20px">
                <label class="layui-form-label"
                    style="padding-left:10px; text-align:center; padding-right:0 ; width: 60px;">状态：</label>
                <div class="layui-input-block" style="margin-left: 80px;">
                    <select name="status" lay-filter="select">
                        <option value="">全部</option>
                        <option value="0">待提现</option>
                        <option value="1">提现中</option>
                        <option value="2">已提现</option>
                    </select>
                </div>
            </div>

           <button class="layui-btn" style="margin-top: 20px; margin-left: 20px;" id="downLoad">导出全部订单</button>
        </form> -->

        <table lay-filter="orderListTable" class="layui-hide" id="orderListTable"></table>
    </div>

</body>


<!-- 操作 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="lookDetails">更新</a>
</script>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script src="../utils.js"></script>
<script>

    layui.use(['table', 'upload', 'form', 'jquery', "laydate"], function () {
        var table = layui.table,
            upload = layui.upload,
            form = layui.form,
            laydate = layui.laydate,
            $ = layui.jquery;


        table.render({
            elem: '#orderListTable'
            , toolbar: "#toolbarDemo"
            , url: window.baseUrl + '/cashOutOrder/getCashOutOrderList'
            , headers: {
                Authorization: localStorage.token
            }
            , method: 'post'
            , contentType: 'application/json'
            , response: {
                statusCode: 200 //规定成功的状态码，默认：0
            }
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 200,
                    "count": res.data.recordsTotal, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
            , request: {
                pageName: 'start' //页码的参数名称，默认：page
                , limitName: 'length' //每页数据量的参数名，默认：limit
            }
            , cols: [[
                { field: 'id', title: '订单ID' }
                , { field: 'userName', title: '会员昵称' }
                , { field: 'ammount', title: '提现金额' }
                , { field: 'arriveAmmount', title: '实际到账金额' }
                , { field: 'transferCharge', title: '手续费' }
                , { field: 'status', title: '提现状态',templet: function(res) {
                    return !res.status ? "待提现" : res.status == 1 ? "提现中" : "已提现"
                } }
                , { field: 'cashOutType', title: '提现类型', templet: function(res) {
                    return !res.cashOutType ? "银行卡" : "零钱"
                } }
                , { field: 'bandUserName', title: '持卡人' }
                , { field: 'bandName', title: '银行' }
                , { field: 'bandNum', title: '卡号' }
                , { field: '', title: '交易凭证' , templet: function(res) {
                    return res.voucherUrl ? "<img class='viewImg' style='width:100px;' src='"+ res.voucherUrl +"'>" : "-"
                }}
                , { field: 'remark', title: '备注', templet: function(res) {
                    return res.remark ? res.remark  : "-"
                }}
                , { field: 'cashOutTime', title: '提现地点' , templet: function(res) {
                    return res.cashOutLineType ? "线下" : !res.cashOutLineType ? "线上" : '-'
                }}
                , { field: 'createTime', title: '申请时间' }
                , { field: 'cashOutTime', title: '提现时间' }
                , { title: '操作', width:80, toolbar: '#barDemo' }
            ]],
            page: true
            , done: function () {
                // 放大图片
                $(".viewImg").on("click", function() {
                    let url = $(this).attr("src");
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        area: ['auto'],
                        skin: 'layui-layer-nobg', //没有背景色
                        shadeClose: true,
                        content: "<img src=" + url + " />"
                    });
                })


                laydate.render({
                    elem: '#test5'
                });

                laydate.render({
                    elem: '#test2'
                });
            }
        });

        

        // 搜索
        form.on("submit(searchForm)", function (e) {

            if (e.field.cashOutTimeEnd) {
                e.field.cashOutTimeEnd = new Date(e.field.cashOutTimeEnd).getTime();
            }
            if (e.field.cashOutTimeStart) {
                e.field.cashOutTimeStart = new Date(e.field.cashOutTimeStart).getTime();
            }

            for (let key in e.field) {
                if (!e.field[key]) {
                    delete e.field[key]
                }
            }

            table.reload('orderListTable', {
                page: {
                    start: 1 //重新从第 1 页开始
                }
                , where: e.field
            });

            return false;
        })


        // 搜索
        form.on("submit(reset)", function (e) {

            table.reload('orderListTable', {
                page: {
                    start: 1 //重新从第 1 页开始
                }
                , where: null
            });

            form.val("resets", null);

            return false;
        })


        // 筛选状态
        // form.on("select(select)", function (e) {

        //     table.reload('orderListTable', {
        //         page: {
        //             start: 1 //重新从第 1 页开始
        //         }
        //         , where: {
        //             ordersState: e.value
        //         }
        //     });
        //     var abc = "";
        //     $("#status .layui-select-title input").attr("placeholder", abc)
        // })

        function layerOpen(data) {
            console.log(data);
            layer.open({
                type: 1,
                title: "更新状态",
                area: ['560px', '595px'], //宽高
                content: `
                        <form class="layui-form" action="">
                            
                            <div class="layui-form-item">
                                <label class="layui-form-label">提现状态:</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="status" value="0" title="待提现" ${!data.status ? "checked" : ""}>
                                    <input type="radio" name="status" value="1" title="提现中" ${data.status == 1 ? "checked" : ""}>
                                    <input type="radio" name="status" value="2" title="已提现" ${data.status == 2 ? "checked" : ""}>
                                </div>
                            </div>

                            <input type="hidden" name="id" value="${data.id}"/>
                            <input type="hidden" name="voucherUrl" value="${data.voucherUrl}" id="imgUrl" />

                            <div class="layui-form-item">
                                <label class="layui-form-label">上传凭证</label>
                                <div class="layui-upload-drag" id="uploadimg">
                                    <i class="layui-icon"></i>
                                    <p>点击上传，或将文件拖拽到此处</p>
                                    <div class="layui-hide" id="uploadDemoView">
                                        <hr>
                                        <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">备注</label>
                                    <div class="layui-input-block">
                                    <textarea style="width: 300px;" name="remark" id="remark" placeholder="请输入备注信息" value="${data.remark}" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item" >
                                <div class="layui-input-block">
                                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                                </div>
                            </div>
                        </form>
                    `,
                success: function () {
                    form.render();
                    uploads(upload, '#uploadimg');
                    if (data.voucherUrl) {
                        layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', data.voucherUrl);
                    }
                    $("#remark").val(data.remark);
                    
                }
            });
        }


        form.on("submit(demo1)", function (el) {
                delete el.field.file;

                ajax({
                    path: "/cashOutOrder/updateCashOutOrder",
                    data: el.field,
                    success: function (res) {
                        layer.closeAll();
                        layer.msg("更新成功");
                        table.reload("orderListTable");
                    }
                }, $)
                

                return false;
            })

        

        // 编辑和删除
        table.on("tool(orderListTable)", function (data) {
            switch (data.event) {
                case "lookDetails":
                    if (data.data.status != 2) {
                        layerOpen(data.data);
                    } else {
                        layer.msg("已经审批过了，禁止点击")
                    }
                    
                    break;
            }
        })
    });
</script>

</html>